import React, { Component } from 'react';
import { get_goodlist } from '../utils/api'
import { DownFill } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom'

class GoodList extends Component {
    state = {
        goodlist: [],
        page: 1,
    }

    componentDidMount() {//发送请求
        get_goodlist({ page: 1, count: 9 }).then((res) => {
            this.setState({
                goodlist: res.data.list
            })
        })
    }
    toDetail(id) {
        // console.log(this.props.history.push({ pathname: '/detail', state: { id } }));
        this.props.history.push({ pathname: '/detail', state: { id } });
    }

    render() {
        return (
            <div className='shoplist'>
                <div className="title">
                    <div className='zuo'>
                        <h6>今日值得购买</h6>
                        <div className='time'>
                            <span>10</span>:
                            <span>10</span>:
                            <span>10</span>
                        </div>
                        <p>后结束</p>
                    </div>
                    <div className="you">
                        <div>MORE</div>
                        <DownFill />
                    </div>
                </div>
                <div className="shoppinglist">
                    {
                        this.state.goodlist.map((item, index) => {
                            return (
                                <div className="shopping" key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <div className='img'>
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="shoppingname">{item.name}</div>
                                    <div className="oprice">原价￥{item.salesPrice.value}</div>
                                    <div className="price">抢购价￥<span>{item.salesPrice.value}</span></div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }

}

export default withRouter(GoodList) ;